<template>
    <div class="qilin-home qilin-pt-4 qilin-px-2 qilin-pb-8">
        <div class="qilin-home-box qilin-p-4">
            <h1>EDGQilin全栈管理系统</h1>
            <p class="qilin-mt-2">前言：该项目是为全栈项目，涉及到nodejs、express、vue等相关全栈的知识；
                node后台涉及到express的中间件、路由模块化、文件上传等功能，
                mongoose驱动对于数据库的增删改查操作以及统一错误输出封装等；
                vue前台涉及到关于vue2.x框架的一系列真实项目后台管理应用模板操作；</p>
            <div class="box-item qilin-px-1 qilin-py-4">
                <div class="qilin-text-info" @click="$router.push('/study/QilinUtils')">qilin-utils</div>
                <div>一个轻量的前端JavaScript工具库，专注于JavaScript，不关心UI。</div>
            </div>
            <div class="box-item qilin-px-1 qilin-py-2">
                <div class="qilin-text-info" @click="$router.push('/study/QilinWeb')">qilin-web</div>
                <div>一个基于vue的UI框架。</div>
            </div>
        </div>
    </div>
</template>
<script>
import {judgeToken} from "@/api/index.js";
export default {
    activated(){
        // 校验token
        judgeToken().then((res)=>{
            if(res.code === 1000){
                // console.log(res.data);
            };
        });
    }
}
</script>
<style lang="less" scoped>
.qilin-home{
    width:100%;
    >.qilin-home-box{
        width:100%;
        >h1{
            font-weight:bolder;
            text-align:center;
        }
        >.box-item{
            position: relative;
            >div:first-child{
                font-size:@size-text-large;
                font-weight:bolder;
                margin-bottom:@rem5;
                cursor:pointer;
            }
            >div:last-child{
                height:@rem30;
                display:flex;
                align-items:center;
                &::before{
                    content:"";
                    display: inline-block;
                    width:@rem5;
                    height:100%;
                    margin-right:@rem15;
                    background-color:@color-theme-common-dark;
                    border-radius: @radius-default;
                }
            }
        }
    }
}
</style>